<template>
  <div class="login-container">
    <video poster="@/assets/login/video-cover.jpeg" loop autoplay muted>
      <source src="@/assets/login/night.mp4" />
    </video>
    <div class="login-form">
      <img src="@/assets/logo.png" />
      <p class="text-header">拼满车调度系统</p>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="100px"
        :rules="rules"
        style="width: 100%"
        label-position="top"
        label-class="label-class"
      >
        <el-form-item class="rule-form" label="手机号" prop="userName">
          <el-input
            v-model.number="form.userName"
            type="text"
            placeholder="请输入手机号"
            maxLength="11"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="userPaw">
          <el-input
            v-model.number="form.userPaw"
            type="text"
            placeholder="请输入密码"
            maxLength="6"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button class="submit-btn" color="#626aef" round @click="submitForm()">
        提交
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { SET_USERINFO } from '@/store/modules/user'
import { driverLogin, getSmsCodeToLogin } from '@/api/user'
import store from '@/store'
const router = useRouter()
const ruleFormRef = ref()
const form = reactive({
  userName: '',
  userPaw: ''
})

const rules = reactive({
  userName: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur'
    }
  ],
  userPaw: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'change'
    }
  ]
})

const submitForm = () => {
  let entity = { phone: '13552676928', requestId: 1, code: '8888' }
  driverLogin(entity).then((res) => {})
  return
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      if (form.userName != '11111111111' || form.userPaw != '111111') {
        ElMessage('账号或密码错误')
        return
      }
      store.commit(SET_USERINFO, form)
      router.push('/')
    }
  })
}
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  font-size: 18px;
  color: #fff;
}
.login-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
  .login-form {
    position: relative;
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 130px;

    img {
      width: 120px;
      height: 120px;
    }

    .text-header {
      font-size: 25px;
      color: #fff;
    }

    .rule-form {
      size: 40px;
      color: #fff;
    }
  }
  .submit-btn {
    width: 60%;
    color: white;
    margin-top: 50px;
  }
}
</style>
